<template>
	<view class="mian">
		<!-- #ifdef MP-WEIXIN -->
			<navbar :bgColor="bgColor" :btnColors='btnColor' title="我的积分" :isGoBack="true" :isNotice="true" :visible="true"></navbar>
		<!-- #endif -->	
		<view class="calendar">
			
			<!-- <view class="calendar-head"> -->
				<!-- <view class="calendar-head-left">
		            <u-icon name="arrow-left" color="#000" size="20"  @click="prevMonth"></u-icon> -->
					<!-- <uni-icons type="left" color="#000" size="20" @click="prevMonth"></uni-icons> -->
					<!-- <view class="head-month">{{ currentMonth + 1 }}
					  <text>月</text>
					</view>
					  <u-icon name="arrow-right" color="#000" size="20"  @click="nextMonth"></u-icon>
				</view> -->
				<!-- <view class="calenar-tip">
					本月签到<text>{{signDayList.length}}</text>天，金币+<text>{{signDayList.length}}</text>
				</view> -->
			<!-- </view> -->
			<view class="calendar-box">
				<view class="header-top">
					<text>已连续签到{{userInfo.sign_num}}天</text>
				</view>
				
				<view class="header mt-20 mb-20">
					<u-icon name="arrow-left" color="#000" size="20"  @click="prevMonth"></u-icon>
					<text>{{ currentYear }}年{{ currentMonth + 1 }}月</text>
					<u-icon name="arrow-right" color="#000" size="20"  @click="nextMonth"></u-icon>
				</view>
				<!-- <u-tabs :list="month" @click="month_click"></u-tabs> -->
				
				<view class="days-box mt-30">
					<view class="days">
						<view class="day datess" v-for="(day, index) in days" :key="index">
							{{ day }}
						</view>
					</view>
					<view class="dates">
						<view class="date" v-for="(date, index) in monthDates" :key="index" @click="selectDate(date)"
							>
							<view class="date-item" :class="selectedDate && selectedDate.day === date&&selectedDate.year===currentYear&&selectedDate.month===currentMonth?'selected1':selectedDate && selectedDate.day === date?'selected1':'' ">
								<view class="" v-if="getSignData(date)">
								 <u-icon name="checkmark-circle-fill" color="#518FA0" size="22" ></u-icon>
								</view>
								
								<view class="" v-if="!getSignData(date)">
								{{ date&& date!==null ? date : '' }}
								</view>
								
							</view>
							<!-- 已签到样式 -->
							<view class="" v-if="getSignData(date)">
								<view class="SignOk">+1</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
			<view class="flex mt-30 ml-30 mb-20" style="font-size: 28rpx;color: #000000;">
				注：签到中断一天即从第一天算起
			</view>
			<view class="submit" @click="dosignup()">
				<view class="btnsub wrap">
					签到
				</view>
			</view>	 
		</view>
	</view>
	
</template>
 
<script>
	// import {
	// 	signInRecord
	// } from '@/api/signIn.js'
	export default {
		data() {
			return {
				...getApp().globalData.config,		
				currentDate: new Date(),
				userInfo:'',
				signDayList:[
					
				],//签到记录
				month: [{
					name: '1月',
				}, {
					name: '2月',
				}, {
					name: '3月'
				}, {
					name: '4月'
				}, {
					name: '5月'
				}, {
					name: '6月'
				}, {
					name: '7月'
				}, {
					name: '8月'
				}, {
					name: '9月'
				}, {
					name: '10月'
				}, {
					name: '11月'
				}, {
					name: '12月'
				}]
			};
		},
		computed: {
			
			selectedDate(){
				let date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth()
				let day = date.getDate()
				let obj={
					year,
					month,
					day
				}
				console.log(obj)
				return obj
			},
			currentYear() {
				return this.currentDate.getFullYear();
			},
			currentMonth() {
				return this.currentDate.getMonth();
			},
			days() {
				return ['日', '一', '二', '三', '四', '五', '六'];
			},
			monthDates() {
				const dates = [];
				const firstDay = new Date(this.currentYear, this.currentMonth, 1);
				const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0);
 
				// 填充前面的空白
				for (let i = 0; i < firstDay.getDay(); i++) {
					dates.push('');
				}
 
				// 填充当前月的日期
				for (let i = 1; i <= lastDay.getDate(); i++) {
					let date = (new Date(this.currentYear, this.currentMonth, i)).getDate()
					dates.push(date);
				}
 
				return dates;
			},
		},
		onShow(){
			this.getDayData()
			this.query_member()
		},
		
		methods: {
			...getApp().globalData.function,	
			
			//获取用户信息
			query_member(){
				let user_info=uni.getStorageSync('userInfo');
				let that=this;
				if(user_info){
					let obj_data={
						token:user_info.token,
					};
					this.$http.getUser(obj_data).then(res=>{				
						if(res.resCode=='9999'){
							uni.setStorageSync('userInfo',res.data);	
						    that.userInfo=res.data
						}				
					})				
				}
			},
			
			//签到
				
			month_click(e){
				
			},
			dosignup(){
				let that = this
				let obj={
					token:uni.getStorageSync('userInfo').token,
				}				
				that.$http.doSignRule(obj).then(res =>{
					 if(res.resCode=="9999"){					
						uni.showToast({title:res.resMessage,icon:"none"})
						setTimeout(function(){
							that.getDayData()
							that.query_member()
						},3000)
						
					 }else{
						uni.showToast({title:res.resMessage,icon:"none"})
					 }
				})
			},
            //判断哪天进行了签到
			getSignData(data){
				let currentMonth=this.currentMonth+1
		     	if(currentMonth<10) currentMonth="0"+currentMonth
				if(data<10) data="0"+data
				let date=this.currentYear+'-'+currentMonth+'-'+data
				// console.log('res',date)
				let falg = false
				this.signDayList.length>0&&this.signDayList.forEach(item=>{
					if(item==date){
						falg = true
					}
				})
				return falg
			},
			// 获取签到记录
			getDayData(){
				let that=this
			    let obj={year:this.currentYear,month:this.currentMonth+1,token:uni.getStorageSync('userInfo').token}
				this.$http.pointsLog(obj).then(res =>{
					 if(res.resCode=="9999"){	
						 that.signDayList=res.data.date;
						// uni.showToast({title:res.resMessage,icon:"none"})
					 }else{
						  that.signDayList=[];
						uni.showToast({title:res.resMessage,icon:"none"})
					 }
				})
			},
            //上个月
			prevMonth() {
				this.currentDate.setMonth(this.currentMonth - 1);
				this.currentDate = new Date(this.currentDate); // 触发视图更新
				this.getDayData()
			},
               //下个月
			nextMonth() {
				
				this.currentDate.setMonth(this.currentMonth + 1);
				this.currentDate = new Date(this.currentDate); // 触发视图更新
				this.getDayData()
			},
			selectDate(date) {
				if (date) {
					this.$emit('dateSelected', date);
				}
			},
		},
	};
</script>
 
<style scoped lang="scss">
	.u-tabs__wrapper__scroll-view-wrapper.data-v-0de61367{
		width: 56% !important;
	}
	.month{
		display: flex;
		width: 97%;
		// margin-left: 20rpx;
		// margin-right: 20rpx;
		// background-color: red;
	}
	.datess{
		color: #CBCDCE ;
	}
  .submit{
	// display: flex;
  	width: 100%;
  	// position: fixed;
  	bottom: 0px;
  	height: 90px;
  	padding: 12px;
  	box-sizing: border-box;
  	background: #fff;
  	
  }
  .btnsub{
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	font-size: 16px;
  	color: #fff;
  	background: #518FA0;
  	border-radius: 62rpx;
  	height: 44px;
	margin-left: 40rpx;
	margin-right: 40rpx;
  }
   .header-top{
	   display: flex;
	   border-radius: 12rpx 12rpx 0rpx 0rpx;
	   background-color: #518FA0;
	   color: #fff;
	   padding-top: 28rpx;
       padding-left: 28rpx;	
	   padding-bottom: 28rpx;	
	   font-size: 35rpx;
   }
	.SignOk{
		font-size: 23rpx;
		color: #4A7E89;
	}
	.calendar {
		height: 100vh;
		width: 100%;
		 background-color: #fff;
		.calendar-head{
			width: 100%;
			display: flex;
			align-items: center;
			.calendar-head-left{
				display: flex;
				align-items: center;
				.head-month{
					color: #000;
					margin: 0 10rpx;
					font-size: 50rpx;
					text{
						font-size: 30rpx;
					}
				}
			}
			.calenar-tip{
				margin-left: 50rpx;
				font-size: 26rpx;
				color: #000;
				text{
					font-size: 30rpx;
					margin: 0 5rpx;
				}
			}
			
		}
	}
	.calendar-box{
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		border: 1rpx solid #518FA0;
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			padding: 20rpx;
		}
	}
	.days-box{
		width: 98%;
		margin-left: 20rpx;
		margin-right: 40rpx;
		// padding: 20rpx 20rpx 20rpx 20rpx;
	}
 
	
 
	.days,
	.dates {
		display: grid;
		
		grid-template-columns: repeat(7, 1fr);
	}
 
	.day,
	.date {
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		width: 50rpx;
		height: 90rpx;
	}
	.date-item{
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.selected {
		// background: linear-gradient(to bottom, #fc9f44, #fb3750);
		color: white;
	}
	.selected1{
		// border: 1px solid #fb3750;
	}
</style>